/* eslint-disable eqeqeq */
/* eslint-disable no-unused-vars */

<template>
  <div class="app-container">
    <Card dis-hover class="task-card">
      <div class="app-container" style="background-color:white;">

        <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="mini">

          <el-form-item label="内置">
            <el-select v-model="queryForm.system" placeholder="请选择" clearable>
              <el-option
                v-for="item in systemOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="来源">
            <el-select v-model="queryForm.dsType" placeholder="请选择" clearable>
              <el-option
                v-for="item in dsTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="queryForm.name" clearable />
          </el-form-item>
          <el-form-item label="别名">
            <el-input v-model="queryForm.alias" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="default" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>

        <el-button type="primary" size="mini" @click="add('inner')">新增</el-button>

        <el-row style="margin-top: 10px">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              border
            >
              <el-table-column
                fixed
                prop="name"
                label="名称"
                width="180"
                show-overflow-tooltip
              />
              <el-table-column
                prop="alias"
                label="别名"
                show-overflow-tooltip
              />
              <el-table-column
                prop="system"
                label="系统内置"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.system" type="success">是</el-tag>
                  <el-tag v-else type="warning">否</el-tag>
                </template>

              </el-table-column>
              <el-table-column
                prop="style"
                label="显示样式"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.style=='1'" type="info">列表</el-tag>
                  <el-tag v-else type="info">树形</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="dsType"
                label="数据来源"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.dsType=='dataSource'" type="info">&nbsp; 数据源&nbsp; &nbsp; </el-tag>
                  <el-tag v-else type="info">REST接口</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="objName"
                label="对象名称"
                show-overflow-tooltip
              />
              <el-table-column
                prop="dsAlias"
                label="数据源的别名"
                show-overflow-tooltip
              />

              <el-table-column
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleClick(scope.row)" />
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelClick(scope.row)" />

                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-pagination
            background
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </Card>

  </div>

</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getTaskData, getTaskChartData, getBpmnModelCategory } from '@/api/analy'
// eslint-disable-next-line no-unused-vars
import { getTypesByKey, businessObjectList, businessObjectGetStruct, customDialogList, removeCustomDialog } from '@/api/form'

export default {
  name: 'Task',
  components: {

  },

  data() {
    return {
      systemOptions: [{
        value: '1',
        label: '是'
      }, {
        value: '0',
        label: '否'
      }],
      dsTypeOptions: [{
        value: 'restful',
        label: '接口'
      }, {
        value: 'dataSource',
        label: '数据源'
      }],
      cmOptions: {
        value: '',
        mode: 'application/json',
        theme: 'ambiance',
        readOnly: true
      },
      busObj: false,
      busStruct: '',
      tableData: [],
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      shopName: [],
      queryForm: {
        groupId: '',
        queryForm: '',
        page: 0,
        limit: 10
      },
      categoryData: [
      ]
    }
  },
  mount() {
    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created() {
    this.initData()
  },
  methods: {
    getStruct: function(data) {
      this.busObj = true
      businessObjectGetStruct(data.id).then((response) => {
        this.busStruct = response.data
      })
    },
    add: function(type) {
      this.$router.push({ name: 'customdialogAdd', query: { t: new Date().getTime() }})
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    refreshTask: function(data) {
      // eslint-disable-next-line eqeqeq
      if (data[0].parentId == '-1') {
        this.queryForm.groupId = ''
      } else {
        this.queryForm.groupId = data[0].id
      }
      this.getData()
    },
    queryMethod: function() {
      this.getData()
    },
    getTypesByKeyAction: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    initData: function() {
      this.getTypesByKeyAction()
      this.getData()
    },
    getData: function() {
      customDialogList(this.queryForm).then((response) => {
        this.tableData = response.data
        this.total = parseInt(response.count)
      })
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
    handleClick(data) {
      this.$router.push({ name: 'customdialogAdd', query: { t: new Date().getTime(), 'id': data.id, 'edit': false }})
    },
    handleDelClick(data) {
      var ids = []
      ids.push(data.id)
      removeCustomDialog({ ids: ids }).then((response) => {
        // eslint-disable-next-line eqeqeq
        if (response.code == 0) {
          this.getData()
        } else {
          this.$message({ 'duration': 800, message: response.msg, type: 'warning', customClass: 'zZindex' })
        }
      })
    },
    search() {
      this.queryForm.page = 0
      this.queryMethod()
    },
    reset() {
      this.queryForm.name = ''
      this.queryForm.system = ''
      this.queryForm.dsType = ''
      this.queryForm.alias = ''
      this.queryForm.createTime = ''
      this.queryForm.whereSql = ''
      this.queryDate = []
      this.getData()
    }

  }

}

</script>
<style lang="scss" scoped>
.task-card{
  margin-top: 10px;
}
.main-div {
  background-color: #f3f3f3!important;
}
</style>
